<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

    </style>
</head>
<body>

    <div id="box">


    </div>

    
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/babel.min.js"></script>

    <script type="text/babel">

        const Person = function(){
            const name="王义鑫"
            return <p>我是个人：{name}</p>
        }

        const  age = 12;
        
        function IsAllowMarry(){
            if(age>=22){
                return <p style={{"backgroundColor":"green"}}>可以结婚</p>
            }else{
                return <p style={{"backgroundColor":"red"}}>千万不能结婚</p>
            }
        }
   
       
        const book = (<div>
                {Person()}
                <hr/>
                <Person />
                <hr/>
                <IsAllowMarry/>
            </div>
        );
        
        ReactDOM.render(book,document.getElementById("box"));

        
    </script>
</body>
</html>
